import React, { PureComponent } from 'react';
import { Card, Table } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import DescriptionList from '@/components/DescriptionList';
// import styles from '@/utils/utils.less';
import TextOverFlow from '../../components/TextOverFlow';
import InjSecAccoDetailModal from '../../components/InjSecAccoDetailModal';

const { Description } = DescriptionList;
class EmpInfor extends PureComponent {
  updateInfo = () => {
    const { updateInfo } = this.props;
    updateInfo();
  };

  setSingleModalShow = persion => {
    const { setSingleModalShow } = this.props;
    setSingleModalShow(persion);
  };

  getAccoDetail = id => {
    this.injSecAccoDetail.getinjSecAccoDetail(1, 10, id);
  };

  render() {
    const { persion, social, assData, payData, addEmp } = this.props;
    // const diffShow = social === 2 ? styles.hide : styles.show;
    // const diffShow1 = addEmp === 1 ? styles.hide : styles.show;
    // const diffShow2 = addEmp === 2 ? styles.hide : styles.show;
    // const scrollAdd = addEmp === 1 ? {} : {}
    let name = '';
    if (!persion.resps || persion.resps.length === 0) {
      name = '全部';
    } else {
      name = persion.resps.map(item => item.respName).join(',');
    }
    const isReduceCancle = addEmp === 2 && persion.execState === 8; // 减员并且已取消
    const assDataColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        // className: diffShow,
        align: 'center',
        width: 60,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
      },
      {
        title: '业务开始日期',
        dataIndex: 'busiTime',
        //  className: diffShow2,
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
        fixed: 'left',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endBusiDate',
        // className: diffShow1,
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
        fixed: 'left',
      },
      {
        title: '缴纳金额',
        dataIndex: 'sumAmo',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '申报工资',
        dataIndex: 'payWage',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '参保类型',
        dataIndex: 'addTypeName',
        align: 'center',
        width: 120,
        // className: diffShow2,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: (text, record) => ((isReduceCancle && record.endLTBegin) || !text ? '--' : text),
      },
      {
        title: '企业基数',
        dataIndex: 'unitBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'unitProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '企业固定金额',
        dataIndex: 'corpFixSum',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '企业缴费',
        dataIndex: 'unitAmo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '个人基数',
        dataIndex: 'empBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'empProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '个人固定金额',
        dataIndex: 'empFixSum',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
      {
        title: '个人缴费',
        dataIndex: 'empAmo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (isReduceCancle && record.endLTBegin ? '--' : text),
      },
    ];

    const payDataColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        align: 'center',
        width: 60,
        // className: diffShow,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
      },
      {
        title: '补缴开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '补缴结束日期',
        dataIndex: 'endDate',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'sumAmo',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
      },
      {
        title: '申报工资',
        dataIndex: 'mkupPayBase',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
      },
      {
        title: '参保类型',
        dataIndex: 'addTypeName',
        align: 'center',
        width: 120,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: text => text || '--',
      },
      {
        title: '企业基数',
        dataIndex: 'unitBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'comProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业固定金额',
        dataIndex: 'corpFixSum',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'cormPay',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'empBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人固定金额',
        dataIndex: 'empFixSum',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'personPay',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      // {
      //   title: '政策依据',
      //   dataIndex: 'mkupPayPlcyName',
      //   align: 'center',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      // },
      {
        title: '办理备注',
        dataIndex: 'remark',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <div>
        <Card
          title={
            <span style={{ fontWeight: 'bolder' }} id="socialInfor">
              {social === 1 ? '社保信息' : '公积金信息'}
            </span>
          }
          bordered={false}
          //   待申报、申报中、申报失败 详情页可修改社保信息
          extra={
            persion.execState === 7 || persion.execState === 8 ? null : (
              <a onClick={this.updateInfo}>修改</a>
            )
          }
        >
          <DescriptionList>
            <Description term="执行地区">{persion.declAreaName || '--'}</Description>
            <Description term="缴纳方式">{persion.payWayName}</Description>
            <Description term="政策组合">
              <a
                onClick={() =>
                  router.push(
                    `/searchmanage/policysearch/${social === 1 ? 'detail' : 'foundDetail'}?${
                      social === 1 ? 'insLsPkgId' : 'accuLsPkgId'
                    }=${persion.insGrpId || persion.accuGrpId}&areaId=${
                      persion.declAreaId
                    }&hshdRegFlag=${persion.hshdRegFlag}`
                  )
                }
              >
                {social === 1 ? persion.insGrpName : persion.accuGrpName}
              </a>
            </Description>
            <Description term="执行账户">
              {persion.payWay === 1 ? (
                <a onClick={() => this.setSingleModalShow(persion)}>
                  <TextOverFlow text={persion.declareAccoName} lineClampNum={1} />
                </a>
              ) : (
                <React.Fragment>
                  <a
                    onClick={() =>
                      router.push(
                        `/more/bigaccomanage/${social === 1 ? 'detailins' : 'detailaccu'}?${
                          social === 1 ? 'insAccoId' : 'accuAccoId'
                        }=${persion.insAccoId || persion.accuAccoId}`
                      )
                    }
                  >
                    <TextOverFlow text={persion.declareAccoName} lineClampNum={1} />
                  </a>
                  {persion.injSerAccoName && (
                    <span>
                      /
                      <a onClick={() => this.getAccoDetail(persion.injSerAccoId)}>
                        {persion.injSerAccoName}
                      </a>
                    </span>
                  )}
                </React.Fragment>
              )}
            </Description>
            {/* {persion.injSerAccoName ? (
              <Description term="工伤二级户">
                <a
                  onClick={() =>
                    router.push(
                      `/more/bigaccomanage/detailinjury?injSecAccoId=${persion.injSerAccoId}`
                    )
                  }
                >
                  {persion.injSerAccoName}
                </a>
              </Description>
            ) : null} */}
            {/* <Description term={social === 1 ? '社保组合' : '公积金组合'}> */}

            {/* {addEmp === 1 ? (
              <Description term="参保类型">{persion.addTypeName || '--'}</Description>
            ) : null} */}
            {persion.isJoinIdeId && Number(persion.isJoinIdeId) === 1 && (
              <Description term="缴费人员类别">{persion.joinIdeName}</Description>
            )}
            {/* <Description term={addEmp === 1 ? '业务开始日期' : '业务结束日期'}>
              {addEmp !== 1
                ? moment(persion.endDate).format('YYYY-MM-DD')
                : moment(persion.beginTime).format('YYYY-MM-DD')}
            </Description> */}
            <Description term="当前状态">{persion.declStatus || '--'}</Description>
            {addEmp === 2 ? (
              <Description term="离职日期">
                {(persion.evaTime && moment(persion.evaTime).format('YYYY-MM-DD')) || '--'}
              </Description>
            ) : null}
            {addEmp === 2 ? (
              <Description term="离职原因">{persion.rsgnRsnName || '--'}</Description>
            ) : null}
            <Description term="网报反馈信息">{persion.exexFdbk || '--'}</Description>
            <Description term="账户负责人">{name}</Description>
            <Description term="操作时间">
              {persion.operTime ? moment(persion.operTime).format('YYYY-MM-DD HH:mm') : '--'}
            </Description>
          </DescriptionList>
          <Table
            dataSource={assData}
            columns={
              addEmp === 2
                ? assDataColumns.filter(
                    item => item.title !== '业务开始日期' && item.title !== '参保类型'
                  )
                : assDataColumns
            }
            rowKey={record => record.ass}
            pagination={false}
            style={{ marginTop: 20 }}
            scroll={{ x: 1900 }}
          />
          {addEmp === 1 ? (
            <div style={{ marginTop: 20 }}>
              <h4 style={{ fontWeight: 'bold' }}>个人补缴信息</h4>
              <Table
                dataSource={payData}
                columns={
                  social === 2
                    ? payDataColumns.filter(item => item.title !== '险种')
                    : payDataColumns
                }
                rowKey={record => record.serSetId}
                pagination={false}
                scroll={{ x: 1900 }}
              />
            </div>
          ) : null}
        </Card>
        {/* 工伤二级户详情弹框 */}
        <InjSecAccoDetailModal
          onRef={ref => {
            this.injSecAccoDetail = ref;
          }}
        />
      </div>
    );
  }
}

export default EmpInfor;
